<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>商品信息页面</title>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="axios.min.js"></script>
</head>
<body>
<h1>The Goods Page</h1>
<div id="app">
    <a href="goods-add.html">添加商品</a>
<table>
    <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>remark</td>
            <td>createdTime</td>
            <td colspan="2">operation</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="goods in goodsList">
            <td>{{goods.id}}</td>
            <td>{{goods.name}}</td>
            <td>{{goods.remark}}</td>
            <td>{{goods.createdTime}}</td>
            <td v-on:click="remove(goods.id)">delete</td>
            <td><a v-bind:href="'goods-update.html?id='+goods.id">update</a></td>
        </tr>
    </tbody>
</table>
</div>
</body>
<script>
    var config={
        el:'#app',
        data:{
            goodsList:[]
        },
        mounted:function(){
            this.findGoods();
        },
        methods:{
            remove:function(id){
              debugger;
              var result = window.confirm("你真的要删除吗?");
               console.log(result);
              if(result==true){
                var serverUrl="http://localhost:1314//goods/doRemoveByIdGoods?id="+id;
                axios.get(serverUrl)
                  .then(function (res) {
                      debugger;
                      var result=res.data;
                      window.alert(result);
                      this.vue.findGoods();
                  })
                  .catch()
              }

            },
            findGoods:function () {
                debugger;
                var serverUrl="http://localhost:1314//goods/doFindGoods";
                axios.get(serverUrl)
                    .then(function (res) {
                        debugger;
                        var result=res.data;
                        this.vue.goodsList=result;
                    })
                    .catch()
            }
        }
    }
    var vue=new Vue(config);
</script>
</html>